<template>
  <BasicDrawer
    :title="title"
    :width="width"
    v-bind="$attrs"
    @ok="methods.handleSubmit"
    @register="registerModel"
    :useWrapper="true"
    :show-footer="true"
    destroyOnClose
  >
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script setup lang="ts">
  import ApiV1 from '@/views/common/operate/ApiV1';
  import BasicForm from '@/components/Form/src/BasicForm.vue';
  import { useAutoAdaptWidth } from '@/hooks/system/useAutoAdapt';
  import gloabComponentConfig from '@/settings/gloabComponentConfig';
  import BasicDrawer from '@/components/Drawer/src/BasicDrawer.vue';
  import { useRoleUpdateSchemaForm } from '@/api/http/system/senior/role/role.data';
  import {
    apiGetRoleDetailsPath,
    apiPostRoleAdd,
    apiPostRoleUpdate,
  } from '@/api/http/system/senior/role/role.api';

  const { width } = useAutoAdaptWidth(gloabComponentConfig.adaptiveWidth);
  const emit = defineEmits(['success', 'register']);
  const { registerForm, registerModel, methods, title } = ApiV1.useHandle(emit, {
    formProps: { schemas: useRoleUpdateSchemaForm() },
    title: '角色',
    details: apiGetRoleDetailsPath,
    saveFn: apiPostRoleAdd,
    updateFn: apiPostRoleUpdate,
    pkid: 'roleId',
    mode: 'drawer',
  });
</script>
